<script>
export default {
  props: {
    dateList:{
      type: Array,
      default: []
    },
    day: {
      type: String,
      default: ''
    }
  },
  // 使用render减少dom数量
  render(h) {
      let classList = []
      let tipList = [];  // 存放事项的list
      let pList = [];    // 事项的p标签
      this.dateList.forEach(item => {
        if (item.day === this.day) {
          classList.push(item.state,' dot');
          tipList = item.list;
        }
      })
      // 根据有无list来判断是否渲染日程
      if (tipList.length > 0) {
        tipList.forEach(item=>{
          pList.push(h('p', {class:'listItem'}, item))
        })
        return h('div',{class: classList}, 
          [
            this.day.split('-').slice(1).join('-'),
            h('div', {class:'tip'}, [
              ...pList
            ])
          ]
        )
      } else {
          return h('div',{class: classList}, 
            [
              this.day.split('-').slice(1).join('-'),
            ]
          )
      }
  },
}

</script>
<style scoped lang='less'>
.tip {
  display: none;
  background: #fff;
  border: 1px solid red;
  // width: 100px;
  // height: 100px;
  color:aqua;
  position: relative;
  left: 10px;
  top: 10px;
  z-index: 10000;
}

.is-selected .tip {
  display: block;
}
</style>